<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/scroll.css}">
    <style>
        /* table 样式 */
        table {
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        table td,
        table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }

        table th {
            border-bottom: 2px solid #ccc;
            text-align: center;
        }

        /* blockquote 样式 */
        blockquote {
            display: block;
            border-left: 8px solid #d0e5f2;
            padding: 5px 10px;
            margin: 10px 0;
            line-height: 1.4;
            font-size: 100%;
            background-color: #f1f1f1;
        }

        /* code 样式 */
        code {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
        }

        pre code {
            display: block;
        }

        /* ul ol 样式 */
        ul, ol {
            margin: 10px 0 10px 20px;
        }

        .link {
            font-size: 18px;
            display: block;
            margin: 15px auto;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <nav style="margin: 10px 0; padding-bottom:5px;border-bottom: 1px dashed darkgray;">
    <span class="layui-breadcrumb">
        <a th:href="@{/admin/home}">首页</a>
        <a>办公管理</a>
        <a>
            <cite>在线图床</cite>
        </a>
    </span>
    </nav>
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>在线图床</legend>
        </fieldset>

        <div class="layui-row">
            <div class="layui-col-xs4">
                <div class="grid-demo grid-demo-bg1">
                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>URL列表</legend>
                </fieldset>
                <div class="grid-demo">
                    <div id="linkList">

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/element.js}"></script>
<script th:src="@{/layui/lay/modules/table.js}"></script>

<script type="text/javascript" th:inline="javascript">
    var host = location.host;

    var linkList = [];
    var $linkListDom = $("#linkList");

    var api= [[@{/admin/office/drawingBed/upload}]];
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: api //改成您自己的上传接口
            , accept: "file"
            , exts: 'jpg|jpeg|png|gif'
            , field: "image"
            , done: function (res) {
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                linkList.push(res.data)
                renderLinkList();
                layer.msg('上传成功！');
            }
        });
    });




    function renderLinkList() {
        $linkListDom.empty();
        for (var i = linkList.length - 1; i >= 0; i--) {
            var lk = "http://"+host+linkList[i];
            console.log(lk);
            $linkListDom.append('<div><a class="link" target="_blank" href="' + lk + '">' + lk + '</a></div>')
        }
    }


</script>
</body>
</html>